import Selection from "@/components/form_item/Selection"
import styled from "@emotion/styled"
import { useEffect } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useNavigate } from "react-router-dom"
import { ToolBar } from "../TransactionRecordPage/components/Wrappers"
import { timeRangeOptions } from "../TransactionRecordPage/constants"
import BetRecordCount from "./components/BetRecordCount"
import { BetRecordEmpty } from "./components/BetRecordEmpty"
import { BetRecordHeader } from "./components/BetRecordHeader"
import { BetRecordList } from "./components/BetRecordList"
import { useBetRecord } from "@/features/business"
import { EnumBetStatus } from "./types/bet"
import { BetRecordSummaryCard } from "./components/BetRecordSummaryCard"
import { PATHS } from "@/router/routes"

const Root = styled.div`
    font-family: "Gilroy";
    font-size: 12rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16rem;
    background:
        radial-gradient(
            136.79% 100% at 100% 0%,
            rgba(255, 184, 219, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
            100% 61.68% at 0% 100%,
            rgba(179, 255, 204, 0.25) 0%,
            rgba(255, 255, 255, 0) 100%
        ),
        #ebf3ff;
`

const Top = styled.div``

export default function BetRecordPage() {
    const {
        result,
        list,
        total,
        status,
        time_flag,
        isLoading,
        hasMore,
        setParams,
        getBetRecordList,
    } = useBetRecord()

    const isEmpty = list.length === 0

    const methods = useForm()

    const { handleSubmit, setValue } = methods

    useEffect(() => {
        setValue("status", status)
        setValue("time_flag", time_flag)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [status, time_flag])

    const navigate = useNavigate()

    return (
        <Root>
            <Top>
                <BetRecordHeader
                    title={"Bet Records"}
                    onBack={() => {
                        navigate(PATHS.MY)
                    }}
                />
                <ToolBar style={{ padding: "12rem 16rem 0" }}>
                    <FormProvider {...methods}>
                        <Selection
                            style={{ flex: 1 }}
                            fieldName="status"
                            onClick={handleSubmit(({ status }) => {
                                setParams(
                                    {
                                        status,
                                        time_flag,
                                    },
                                    {
                                        replace: true,
                                    },
                                )
                            })}
                            selectItems={Object.entries(EnumBetStatus).map(([key, value]) => ({
                                name: key,
                                value: value,
                            }))}
                        />
                        <Selection
                            style={{ flex: 1 }}
                            fieldName="time_flag"
                            onClick={handleSubmit(({ time_flag }) => {
                                setParams(
                                    {
                                        status,
                                        time_flag,
                                    },
                                    {
                                        replace: true,
                                    },
                                )
                            })}
                            selectItems={timeRangeOptions}
                        />
                    </FormProvider>
                </ToolBar>
            </Top>

            <BetRecordSummaryCard
                totalBet={result?.bt || ""}
                totalWin={result?.wt || ""}
            />

            {isEmpty && !isLoading ? (
                <BetRecordEmpty />
            ) : (
                <>
                    <BetRecordCount total={total} />
                    <BetRecordList
                        records={list}
                        isLoading={isLoading}
                        hasMore={hasMore}
                        onLoadMore={getBetRecordList}
                    />
                </>
            )}
        </Root>
    )
}
